<template>
    <div v-show="show">
        <router-link v-if="model.children == null && model.path != null" :to="model.path">
            <el-menu-item :index="model.path">
                <div>
                    <i :class="model.icon"></i>
                    <span slot="title">{{model.name}}</span>
                </div>
            </el-menu-item>
        </router-link>
        <el-menu-item
            v-if="model.children == null && model.path == null"
            :index="model.id.toString()"
        >
            <i :class="model.icon"></i>
            <span slot="title">{{model.name}}</span>
        </el-menu-item>
        <el-submenu v-if="model.children != null" :index="model.id.toString()">
            <template slot="title">
                <i :class="model.icon"></i>
                <span style="font-weight:bold;">{{model.name}}</span>
            </template>
            <div v-if="model.children != null">
                <menu-item :show="true" v-for="item in model.children" :model="item" :key="item.id"></menu-item>
            </div>
        </el-submenu>
    </div>
</template>

<script>
export default {
    name: 'MenuItem',
    props: {
        model: Object,
        show: Boolean
    }
}
</script>

<style scoped>
.el-menu a {
    text-decoration: none;
    color: inherit;
}
</style>
